<template>
	<view class="order">

		<!-- 标题栏 -->
		<view class="pages-header">
			<span>订单管理</span>
		</view>
		<!-- 单选框 -->
		<cl-tabs class='tabs-container' v-model="active" :labels="orderVariteyList" :fill="true" swipeable
			@tab-change='tabChange'>
			<template v-for='orderVaritey,index in orderVariteyList'>
				<view :key="orderVaritey.id" class="tab-pane" v-show="active===orderVaritey.name" style="position: relative;">
					<template v-if="orderList.length > 0 ">
						<cl-scroller :ref="orderVaritey.name" @down="onDown" @up="onUp">
							<!-- 首次加载框，可有可无 -->
							<cl-loading-mask :loading="firstLoading" text="加载中">
								<view class="order-list">
									<!-- 单个信息框 -->
									<view class="order-item" v-for="order in orderList" :key="order.orderId">
										<!-- 上层信息栏 -->
										<view class="top-Info">
											<!-- 左边 -->
											<view class="left">
												<view class="desk">
													<span>{{order.desk}}</span>
												</view>
												<span class='rest'>{{order.restaurant}}</span>
											</view>
											<!-- 右边 -->
											<span class="right">
												{{order.cookStatus}}
											</span>
										</view>
										<!-- 中间食物栏 -->
										<OrderList :orderInfoList="order.orderInfoList"></OrderList>
										<!-- 下层展开框 -->
										<view class="bottom-show-load">
											<!-- <cl-divider :color="['#fff', '#F56C6C']">点击查看订单</cl-divider> -->
											<span>
												······查看全部订单······
											</span>
										</view>
										<!-- 下层信息栏 -->
										<view class="bottom-Info">
											<view class="top-order-info">
												<span class='order-date'>{{order.orderCreateTime}}</span>
												<span
													class='order-together'>共<em>{{order.totalDish}}</em>件商品，合计:<em>￥{{order.totalAmount}}</em></span>
											</view>
											<view class="bottom-btns">
												<view class="btn">
													再来一单
												</view>
												<view class="btn">
													查看订单
												</view>
												<view class="btn commit">
													评价
												</view>
												<view class="order-type">
													{{orderTypeInfoShow(order.orderType)}}
												</view>
											</view>
										</view>
									</view>
									<!-- 加载更多 -->
									<cl-loadmore v-if="orderList.length > 0" :loading="moreLoading" background-color='#f7f7f7'></cl-loadmore>
									<!-- 加载更多的缓冲框 -->
									<view style="width: 100%;height:400rpx;"></view>
								</view>
							</cl-loading-mask>
						</cl-scroller>
					</template>
					<!-- 如果为空,展示没有订单的页面 -->
					<template v-else>
						<cl-loading-mask :loading="firstLoading" text="加载中" style='display: flex;justify-content: center;'>
							<image style='width: 375rpx;' src="/static/images/pages/order/empty.webp" mode="aspectFit">
							</image>
						</cl-loading-mask>
					</template>
				</view>
			</template>
		</cl-tabs>
	</view>
</template>

<script>
	import OrderList from '@/components/OrderList/index.vue'
	export default {
		name: 'order',
		components: {
			OrderList
		},
		data() {
			return {
				active: "all", //全部订单
				firstLoading: true, //首次加载框
				moreLoading: false, //下拉刷新加载
				orderVariteyList: [{
					id: 'all',
					label: "全部订单",
					name: "all"
				}, {
					id: 'scan',
					label: "扫码订单",
					name: "scan"
				}, {
					id: 'exchange',
					label: "兑换订单",
					name: "exchange"
				}, {
					id: 'group',
					label: "团购订单",
					name: "group"
				}], //tab列表
				orderList: [{
						orderId: '111',
						orderType: 'scan',
						orderCreateTime: '2022-11-11 11:11',
						totalDish: '8',
						totalAmount: '258',
						desk: '8号桌',
						restaurant: '田季麻辣烫(T7341)',
						cookStatus: '正在制作',
						orderInfoList: [{
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}]
					},
					{
						orderId: '222',
						orderType: 'exchange',
						orderCreateTime: '2022-11-11 11:11',
						totalDish: '8',
						totalAmount: '258',
						desk: '8号桌',
						restaurant: '田季麻辣烫(T7341)',
						cookStatus: '正在制作',
						orderInfoList: [{
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}]
					},
					{
						orderId: '333',
						orderType: 'scan',
						orderCreateTime: '2022-11-11 11:11',
						totalDish: '8',
						totalAmount: '258',
						desk: '8号桌',
						restaurant: '田季麻辣烫(T7341)',
						cookStatus: '正在制作',
						orderInfoList: [{
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}, {
							imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
							dish: '西冷牛排',
							degree: '[七分熟][孜然味]',
							quantity: '1',
							price: '129'
						}]
					},
				],
				orderAllList: [], //展示的数据
			}
		},
		mounted() {
			this.getAllOrderList()
			this.orderListFilter()
			setTimeout(() => {
				this.firstLoading = false
			}, 200)
		},
		methods: {
			//scroll到达顶部
			onDown() {
				console.log('onDown');
				setTimeout(() => {
					//结束（收起）下拉刷新
					this.$refs[this.active][0].end()
				}, 1000)
			},
			//scroll到达底部
			onUp() {
				console.log('onUp');
				this.moreLoading = true
				setTimeout(() => {
					this.getNewOrderListAddOrderList()
					this.orderListFilter()
					this.moreLoading = false
				}, 1500)
			},
			//标签页切换
			tabChange() {
				console.log(this.active);
				this.firstLoading = true
				this.orderListFilter()
				setTimeout(() => {
					this.firstLoading = false
				}, 1600)
			},
			//获取数据
			getAllOrderList() {
				this.orderAllList = this.orderList
			},
			//返回订单类型
			orderTypeInfoShow(type) {
				switch (type) {
					case 'scan':
						return '扫码点餐';
						break;
					case 'exchange':
						return '兑换订单';
						break;
					case 'group':
						return '团购订单';
						break;
				}
			},
			//过滤列表
			orderListFilter() {
				if (this.active === 'all') {
					this.orderList = this.orderAllList
					return
				}
				this.orderList = this.orderAllList.filter(item => item.orderType === this.active)
			},
			//获取新数据追加
			getNewOrderListAddOrderList() {
				this.orderAllList = this.orderAllList.concat(this.orderAllList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: $pages-background-color;

		//标签栏有公共样式
		.pages-header {
			background-color: $white-notion;
		}

		//单选框样式
		.tabs-container {
			height: calc(100% - 92rpx);

			.tab-pane {
				background-color: $pages-background-color;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;

				.order-list {
					// margin: 0 auto;
					width: 700rpx;
					height: 500px;
					// background-color: red;

					.order-item {
						margin-top: 20rpx;
						width: 100%;
						border-radius: 12rpx;
						overflow: hidden;
						background-color: $white-notion;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						// 上层信息栏
						.top-Info {
							position: relative;
							width: 100%;
							height: 80rpx;
							display: flex;
							align-items: center;

							&::after {
								position: absolute;
								content: "";
								display: block;
								left: 50%;
								transform: translateX(-50%);
								bottom: 0;
								width: 90%;
								height: 1rpx;
								background-color: $divider;
							}

							.left {
								width: calc(100% - 160rpx);
								height: 100%;
								display: flex;
								align-items: center;

								.desk {
									margin-left: 22rpx;
									min-width: 90rpx;
									max-width: 150rpx;
									height: 40rpx;
									padding: 2rpx 10rpx;
									background-color: $main-color;
									border-radius: 12rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									overflow: hidden;

									span {
										font-size: 24rpx;
										font-weight: 300;
										color: $white-notion;
										text-align: center;
										width: 100%;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}

								.rest {
									flex: 1;
									margin-left: 10rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: $main-text;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.right {
								width: 160rpx;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 24rpx;
								font-weight: 600;
								letter-spacing: 1rpx;
								color: $number-rich;
							}
						}


						//下层展开框
						.bottom-show-load {
							position: relative;
							width: 100%;
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							span {
								margin-left: 4rpx;
								font-size: 28rpx;
								font-weight: 300;
								color: $main-text;
							}
						}

						//下层信息框
						.bottom-Info {
							width: 100%;
							height: 140rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							//头部信息框
							.top-order-info {
								flex: 1;
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.order-date {
									font-size: 24rpx;
									font-weight: 400;
									color: $main-text;
									margin-left: 20rpx;
								}

								.order-together {
									margin-right: 20rpx;
									font-size: 24rpx;
									font-weight: 300;
									color: $main-text;
									display: flex;
									align-items: center;

									em {
										font-weight: 500;
										font-size: 28rpx;
										font-style: normal;
									}
								}
							}

							//底部按钮框
							.bottom-btns {
								position: relative;
								flex: 1;
								width: 100%;
								display: flex;
								align-items: flex-start;
								justify-content: flex-end;
								margin-right: 10rpx;

								.order-type {
									position: absolute;
									left: 25rpx;
									top: 0;
									background-color: $number-rich;
									font-size: 28rpx;
									font-weight: 500;
									border-radius: 12rpx;
									padding: 0 4rpx 2rpx;
									color: $white-notion;
								}

								.btn {
									padding: 1rpx 12rpx;
									border-radius: 48rpx;
									height: 44rpx;
									line-height: 40rpx;
									text-align: center;
									font-size: 28rpx;
									font-weight: 500;
									letter-spacing: 1rpx;
									border: 2rpx solid $main-color;
									color: $main-color;
									background-color: $white-notion;
									margin-right: 10rpx;

									&.commit {
										padding: 1rpx 16rpx;
										letter-spacing: 2rpx;
									}
								}
							}
						}

					}
				}
			}
		}
	}

	// /deep/.cl-list-item__content.is-justify-end {
	// 	justify-content: flex-start;
	// }
</style>
